'use client'

import { LatLng } from "leaflet";
import { TileLayer, MapContainer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';

const Map = () => {
    let position = new LatLng(39.90872, 116.39748)

    return (
        <MapContainer 
            center={position} 
            zoom={13} 
            scrollWheelZoom={false}
            style={{ height: '100%', width: '100%' }}
        >
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={position}>
                <Popup>
                    北京市天安门广场
                </Popup>
            </Marker>
        </MapContainer>
    )
}

export default Map; 